<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>myvue</title>
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="app-test"></div>

  <!-- <div class="todo-app">
    <div class="title">Todo App</div>

    <div class="todo-from">
      <input class="todo-input" type="text" placeholder="Add a Todo">
      <div class="todo-button">Add Todo</div>
    </div>


    <div class="item complete">
      <div>
        <input type="checkbox">
        <span class="name">第一项</span>
      </div>

      <div class="del">删除</div>
    </div>

    <div class="item">
      <div>
        <input type="checkbox">
        <span class="name">第二项</span>
      </div>

      <div class="del">删除</div>
    </div>

    <div class="item">
      <div>
        <input type="checkbox">
        <span class="name">第三项</span>
      </div>

      <div class="del">删除</div>
    </div>

  </div>

  <style type="text/css">
    .complete {
      text-decoration: line-through;
      opacity: 0.4;
    }

    .del {
      color: red;
    }

    .item {
      width: 60%;
      height: 50px;
      box-sizing: border-box;
      border-radius: 20px;
      margin: 8px auto;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 20px;
    }

    .todo-button {
      width: 100px;
      height: 54px;
      line-height: 54px;
      border-radius: 0 20px 20px 0;
      text-align: center;
      background: linear-gradient(to right,
          rgb(113, 65, 168),
          rgba(44, 114, 251, 1));
      cursor: pointer;
      user-select: none;
      color: #ffffff;

    }

    .todo-input {
      width: 60%;
      height: 50px;
      border: 1px solid #dfe1e5;
      outline: none;
      border-radius: 20px 0 0 20px;
      padding-left: 15px;
    }

    .todo-from {
      display: flex;
      margin-top: 30px;
      margin-bottom: 20px;
      justify-content: center;
      align-items: center;
    }

    body {
      background: linear-gradient(to right,
          rgb(113, 65, 168),
          rgba(44, 114, 251, 1));
    }

    .todo-app {
      width: 98%;
      height: 500px;
      padding-top: 30px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 5px;
      margin-top: 40px;
      margin-left: 1%;
    }

    .title {
      font-size: 30px;
      font-weight: 700;
      text-align: center;
    }
  </style> -->


  <!--变量赋值示例---------------------------------------------------------------------------->
  <!-- <div id="app">
    <img src="../myvue/src/assets/logo.png">
    {{ a }} //使用双大括号的方式声明了一个变量a
  </div>

  <script type="text/javascript">
    var data = { a: 1 };
    // new Vue表示 通过Vue函数创建一个新的Vuew实例。var app 表示返回Vue的一个对象
    var app = new Vue({
      el: '#app',  //el表示element元素，用id选择器的方法选择id="app"的元素
      // data: {   //data是用来保存数据，在外面声明的变量，可在这里进行初始化赋值
      //   message: 'Hello Vue'
      // }

      data: data //后面的这个data是全新的一个变量
    });
    // watch是一个实例方法，可观察变量a值的变化
    app.$watch('a', function (newVal, oldVal) {
      console.log("Hello, World!");
      console.log(newVal + "=new", oldVal + "=old");
    })
    app.$data.a = "test......"
  </script> -->

  <!-- VUE生命周期示例 VUE的应用在运行的每个阶段所自动对应的生命周期------------------------------------------------------->
  <!-- <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        a: "hi vue",
      },
      //在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
      beforceCreate: function () {
        console.log("beforceCreate=======");
      },
      // 在实例创建完成后被立即调用。
      // 在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调
      // 然而，挂载阶段还没开始，$el 属性目前不可见。
      create: function () {
        console.log("create===========");
      },
      // 在挂载开始之前被调用：相关的渲染函数首次被调用
      beforeMount: function () {
        console.log("beforeMount======");
      },
      // el被新创建的vm.$el替换，挂载成功
      mounted: function () {
        console.log("mounted=====");
      },
      // 数据更新时调用
      beforeUpdate: function () {
        console.log("beforceUpdate=======");
      },
      // 组件DOM已经更新，组件更新完毕
      updated: function () {
        console.log("updated=============");
      }
    });
    // 3秒后更新
    setTimeout(function () {
      vm.a = "change。。。。。。";
    }, 3000);
  </script> -->

  <!-- 模板语法-插值的使用------------------------------------------------------------------------ -->
  <!-- <div id="app-3" v-once>
    {{ msg }} //v-once当数据改变时，内容不会更新
    <p>Using mustacher:{{ rawHtml}}</p>
    <p>Using v-html directive:<span v-html="rawHtml">使用v-html输出原型的html内容</span></p>
    <div v-bind:class="color">使用v-bind为标签动态绑定属性值,此示例为class属性绑定color值</div>
    <p>{{ number+1}} javascript表达式的使用</p>
    <p>{{ok?"yes":"no"}} 三元运算符的使用</p>
    <p>{{message.split("").reverse().join("")}} 使用reverse反向获取字符串</p>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app-3",
      data: {
        msg: "app-3",
        rawHtml: '<span style="color: red">this is should be red</span>',
        color: 'red',
        number: 10,
        ok: true,
        message: "vue"
      }
    })
  </script>
  <style type="text/css">
    .red {
      color: red
    }
  </style> -->


  <!-- 模板语法-指令的使用----------------------------------------------------------- -->
  <!-- <div id="app-4">
    <p v-if="seen">v-if与v-else指令结合根据表达式seen的值真假来插入/移除p元素</p>
    <p v-else>you can't see me</p>

    <a v-bind:href="url">v-bind herf跳转</a>

    <div v-for="(item,index) in items">
      v-for指令的使用 {{index}}:{{item.message}}
    </div>

    <div v-for="(value,key,index) in object">{{value}}</div>

    <div @click="click1">
      <div @click.stop="click2">
        使用@click指令为元素绑定事件click me，另外使用@click.stop修饰符来阻止事件继续就会停下来。
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app-4",
      data: {
        seen: true,
        url: "http://www.baidu.com",
        items: [{
          message: "hello"
        }, {
          message: "world"
        }],
        object: {
          name: "vue",
          age: 18
        }
      },
      methods: {
        click1: function () {
          console.log("click1");
        },
        click2: function () {
          console.log("click2");
        }
      }
    })
  </script> -->

  <!-- Class与Style绑定--------------------------------------------------------------------- -->
  <!-- <div id="app-5">
    <div class="test" v-bind:class="{active:isActive,green:isGreen}"
      style="width:200px; height:200px; text-align:center; line-height:200px;">
      hi vue
    </div>
    <div :style="{color:color,fontSize:size,background:isBlue ? '#0000FF' : ''}">
      通过v-bind:style语法动态绑定style
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app-5",
      data: {
        isActive: true,
        isGreen: true,
        color: '#FF0000',
        size: '30px',
        isBlue: true
      }
    });
  </script>
  <style type="text/css">
    .test {
      font-size: 30px;
    }

    .green {
      color: #00FF00;
    }

    .active {
      background: #FF0000;
    }
  </style> -->

  <!-- 条件渲染 v-fi v-else v-else-if------------------------------------------------------------------------------- -->
  <!-- <div id="app-6">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <h1 v-show="ok">v-show的元素始终会渲染，只是控制元素的显示与隐藏，需要非常频繁的切换使用v-show,如果运行条件很少改变使用v-if较好</h1>
    </h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app-6",
      data: {
        type: "A",
        ok: true //false不显示
      }
    });
  </script> -->

  <!-- 列表渲染 v-for------------------------------------------------------------------------>
  <!-- <div id="app-7">
    <div>
      列表渲染的示例：
    </div>
    <ul>
      <li v-for="item,index in items" :key="index">
        {{index}} {{item.name}}
      </li>
    </ul>
    <ul>
      <li v-for="value,key in object" :key="key">
        {{key}} {{value}}
      </li>
    </ul>
  </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app-7",
      data: {
        items: [
          {
            id: 1,
            name: "张三"
          },
          {
            id: 2,
            name: "李四"
          },
          {
            id: 3,
            name: "王五"
          }
        ],
        object: {
          title: "标题",
          author: "作者",
          publishedAt: "2017-01-01"
        }
      }
    });
  </script> -->

  <!-- 事件绑定--------------------------------------------------------------------------- -->
  <!-- <div id="app-8">
    <div>事件绑定：使用v-no指令监听DOM事件，并触发时运行一些JavaScript代码。</div></br>
    <div id="example-8">
      <button v-on:click="counter += 1">增加</button>
      <button v-on:click="counter -= 1">减少</button>
      <div>{{ counter }}</div></br>
      <button v-on:click="greet('abc',$event)">触发Greet方法,$event是一个事件变量</button>
      <button v-on:dblclick="greet('abc',$event)">dblclick双击事件</button>
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#example-8',
      data: {
        counter: 0,
        name: "vue"
      },
      methods: {
        greet: function (str, e) {
          alert('调用Greet方法');
          alert('Hello ' + this.name + '!');
          alert('调用Greet方法传入的参数' + str);
          console.log(e);
        }
      }
    });
  </script> -->

  <!--表单输入绑定-------------------------------------------------------------------------------------->
  <!-- <div id="app-9">
    <div>v-model指令的使用:在表单input、textarea(多行文本)及select元素上创建双向数据绑定。</div>
    <div>
      <input v-model="msg" placeholder="edit me">
      <p>Message is: {{msg}}</p>
      <textarea v-model="msg2" placeholder="write something"></textarea>
      <p style="white-space: pre-line;">Message2 is: {{msg2}}</p>
      <br />
      <div style="margin-top:20px;">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <lable for="jack">Jack</lable>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <lable for="john">John</lable>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <lable for="mike">Mike</lable>
        <br>
        <span>Checked names:{{checkedNames}}</span>
      </div>

      <div style="margin-top:20px;">
        <input type="radio" id="one" value="One" v-model="picked">
        <lable for="one">One</lable>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <lable for="two">Two</lable>
        <br>
        <span>Picked:{{picked}}</span>
      </div>
    </div>
    <button type="button" @click="submit">提交</button>
  </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app-9',
      data: {
        msg: 'test',
        msg2: 'hi',
        checkedNames: ['Jack', 'John'], // 复选框可以选择多个值，所以使用数组来保存
        picked: 'Two'
      },
      methods: {
        submit: function () {
          alert(this.msg);
          var postObj = {
            msg: this.msg,
            msg2: this.msg2,
            checkedNames: this.checkedNames,
            picked: this.picked
          };
          console.log(JSON.stringify(postObj));
          console.log(postObj);
        }
      }
    });
  </script> -->

  <!--组件基础---------------------------------------------------------------->
  <!-- <div id="app-10">
    <div>可把重复的功能封装为组件,使用Vue.component()来创建组件</div>
    <my-component title="title1"></my-component>
    <button-counter title="button-counter" @clicknow="clicknow">
      <h2>定义使用插槽slot插入标签</h2>
    </button-counter>
  </div>

  <script type="text/javascript">
    // 定义一个名为my-component的组件。全局注册
    Vue.component('my-component', {
      props: ['title'], // props是组件的属性
      data: function () {
        return {
          count: 0
        }
      },
      template: '<div><h1>hi...</h1><button v-on:click="count++">{{title}} You clicked me {{count}} times.</button></div>',
    });

    Vue.component('button-counter', {
      props: ['title'], // props是组件的属性
      data: function () {
        return {
          count: 0
        }
      },
      template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{count}} times.</button><slot></slot></div>',
      methods: {
        clickfun: function () {
          this.count++;
          this.$emit('clicknow', this.count); //this.$emit定义要触发的方法，比如clicknow
        }
      }
    });

    var vm = new Vue({
      el: '#app-10',
      data: {
        msg: 'test'
      },
      methods: {
        clicknow: function (e) {
          console.log(e);
        }
      },
      // 也可以这样组件定义,叫做局部注册
      // components: {
      //   'my-component': {
      //     template: '<h1>{{msg}}</h1>',
      //     data: function () {
      //       return {
      //         msg: 'hello'
      //       }
      //     }
      //   }
      // }
    });
  </script> -->

  <!-- 组件注册----------------------------------------------------- -->
  <!-- <div id="app-11">
    <div>组件注册(局部注册)</div>
    <my-component></my-component>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app-11',
      data: {
        msg: 'test'
      },
      components: {
        'my-component': {
          template: '<h1>{{msg}}</h1>',
          data: function () {
            return {
              msg: '局部注册'
            }
          }
        }
      }
    })
  </script> -->

  <!-- 单文件组件------------------------------------->
  <!-- <div id="app-12">
    <div>单文件组件的使用：文件扩展名为.vue的single-file components（单文件组件）为提供了解决方法，并且还可以使用webpack或Browserify等构建工具。</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app-12',
      data: {
        msg: 'test'
      }
    })
  </script> -->
</body>

</html>